<template>
  <div>
    <div class="report-detail-body">
      <div class="report-item">
        <div class="content">
          <div class="image"></div>
          <div class="section">
            <div class="title">{{reportInfo.name}}</div>
            <div class="desc">{{reportInfo.desc}}</div>
          </div>
        </div>
        <div class="footer">
          <div class="item">
            <div class="images">
              <img class="head-img" :src="img === null ? '/src/assets/error.png' : img" v-for="(img, k) in reportInfo.head_img" :key="k">
            </div>
            <span class="v-line"></span>
            <span class="text blue">{{reportInfo.reward}}</span>
          </div>
          <div class="item">
            <span class="text">{{reportInfo.report_time}}</span>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="report-detail" ref="reportBody">
        <div class="title">线报详情</div>
        <div class="content" v-html="reportInfo.content"></div>
      </div>
      <div class="dispute" :class="{fixed: ifFixed}">
        <div class="report-hint">
          <p>本线报源自热心卡友的爆料，经小惠人工审核后发布。</p>
          <p>如线报有误，还请卡友指正纠错！</p>
          <p>如您觉得线报很好，欢迎点赞 :)</p>
        </div>
        <mt-button
          type="default"
          :plain="true"
          @click.native="showCorrection"
        >
          我要纠错
        </mt-button>
      </div>
      <correction ref="correction"></correction>
      <div class="share-btn">
        <div class="property">
          <div class="item">
            <div class="text mr-12">
              <img src="/src/assets/icons/eye.png">
              <span class="text">{{reportInfo.read}}</span>
            </div>
            <div class="text mr-12" @click="clickZan">
              <img :src="`/src/assets/icons/zan-${reportInfo.if_zan ? '2' : '1'}.png`">
              <span class="text">{{reportInfo.zan}}</span>
            </div>
            <!-- <img src="/src/assets/icons/share-red.png" @click="showShare"> -->
          </div>
          <div class="item">
            <mt-button @click.native="showShare">我要分享</mt-button>
          </div>
        </div>
      </div>
      <!-- 分享弹层 -->
      <div class="share-alert" v-show="ifShare">
        <img src="/src/assets/share-btn.png" @click="hideShare">
      </div>
    </div>
  </div>
</template>

<script>
  import Correction from '@/components/Correction'

  export default {
    name: 'ReportDetail',
    components: {
      Correction
    },
    data () {
      return {
        reportInfo: {},
        ifFixed: false,
        ifShare: false
      }
    },
    methods: {
      getReportInfo () {
        let params = {
          id: this.$route.params.id
        }
        this.$post('/vue/report/detail', params).then(data => {
          this.reportInfo = data
          window.document.title = this.reportInfo.name + ' - 线报详情'
          // 微信分享
          this.wechatShare({
            title: `最新线报-${this.reportInfo.name}`,
            desc: '要想生活过得去，就得关注惠权益！',
            link: `${window.location.origin}/#/reportDetailShare/${this.$route.params.id}`,
            userShare: false
          })
        })
      },
      clickZan () {
        let params = {
          id: this.$route.params.id
        }
        this.$post('/vue/report/zan', params).then(data => {
          this.reportInfo.if_zan = true
          this.reportInfo.zan += 1
        })
      },
      showCorrection () {
        this.$refs.correction.popShow1 = true
        this.$refs.correction.column = `线报详情 - ${this.reportInfo.name}`
      },
      showShare () {
        this.ifShare = true
      },
      hideShare () {
        this.ifShare = false
      },
      readCount () {
        let params = {id: this.$route.params.id}
        this.$post('/vue/report/read_count', params).then(() => {})
      }
    },
    mounted () {
      this.getReportInfo()
      this.readCount()
    },
    updated () {
      // 我要纠错位置
      let reportBody = this.$refs.reportBody.getBoundingClientRect()
      this.ifFixed = document.documentElement.clientHeight - reportBody.top - 58 - 114 >= 260
    }
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-246: rgb(246, 246, 246);
  @c-red: rgb(217, 117, 99);
  @c-blue: rgb(108, 184, 222);
  @c-dark-blue: rgb(240, 244, 247);

  .report-detail-body {
    height: calc(~'100vh - 57px');
    overflow-x: hidden;
    overflow-y: scroll;
    background: #FFF;
    .report-item {
      padding: 12px 12px 6px;
      text-align: left;
      .content {
        border-bottom: 1px solid @c-235;
        padding-bottom: 12px;
        display: flex;
        align-items: center;
        align-content: flex-start;
        justify-content: space-between;
        .image {
          display: block;
          flex: 0 0 auto;
          width: 23%;
          padding-bottom: 23%;
          height: 0;
          border-radius: 8px;
          background-image: url('/src/assets/logo.png');
          background-size: 100% 100%;
        }
        .section {
          display: block;
          flex: 0 0 auto;
          width: 70%;
          margin-left: 3.3%;
          padding-right: 3.3%;
          .title {
            font-size: 13px;
            line-height: 24px;
            font-weight: bold;
            color: @c-124;
          }
          .desc {
            font-size: 12px;
            line-height: 20px;
            color: @c-red;
            margin-top: 12px;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
      .footer {
        &:extend(.report-detail-body .report-item .content);
        flex-wrap: wrap;
        border: 0;
        margin-top: 8px;
        font-size: 0;
        padding: 0;
        .item {
          flex: 0 0 auto;
          .images {
            width: 48px;
            text-align: center;
            display: inline-block;
            vertical-align: middle;
          }
          img {
            width: 24px;
            height: 24px;
            display: inline-block;
            vertical-align: middle;
            &.head-img {
              margin-left: -12px;
              border-radius: 100%;
              box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
              &:first-child {
                margin-left: 0;
              }
            }
          }
          .v-line {
            width: 1px;
            height: 20px;
            background-color: @c-226;
            margin: 0 12px;
            display: inline-block;
            vertical-align: middle;
          }
        }
        .text {
          font-size: 12px;
          line-height: 24px;
          color: @c-169;
          display: inline-block;
          vertical-align: middle;
          &.blue {
            color: @c-blue;
          }
        }
      }
    }
    .line {
      height: 8px;
      background-color: @c-dark-blue;
    }
    .report-detail {
      padding: 12px 12px 0;
      text-align: left;
      .title {
        font-size: 13px;
        line-height: 24px;
        font-weight: bold;
        color: @c-124;
      }
      .content {
        margin-top: 8px;
        font-size: 12px;
        line-height: 24px;
        color: @c-124;
      }
    }
    .report-hint {
      margin: 12px 0;
      padding: 8px 12px;
      font-size: 10px;
      line-height: 20px;
      text-align: left;
      color: @c-169;
      background-color: @c-246;
    }
    .dispute {
      margin: 15px 0;
      &.fixed {
        position: absolute;
        bottom: 80px;
        left: 0;
        right: 0;
        margin: auto;
      }
      .mint-button {
        margin-top: 12px;
        width: 120px;
        height: 32px;
        font-size: 13px;
        line-height: 24px;
        border: 1px solid @c-169;
        border-radius: 16px;
        background-color: transparent;
        color: @c-169;
      }
    }
    .share-qrcode {
      width: 45%;
      margin: 0 auto;
    }
    .share-btn {
      background-color: #FFF;
      padding: 8px 12px;
      border-top: 1px solid @c-226;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      .property {
        &:extend(.report-detail-body .report-item .content);
        border: 0;
        font-size: 0;
        padding: 0;
        margin: 0;
        .mr-12 {
          margin-right: 12px;
        }
        .item {
          flex: 0 0 auto;
          img {
            width: 24px;
            height: 24px;
            display: inline-block;
            vertical-align: middle;
            &.head-img {
              margin-left: -12px;
              border-radius: 100%;
              box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
              &:first-child {
                margin-left: 0;
              }
            }
          }
          .v-line {
            width: 1px;
            height: 20px;
            background-color: @c-226;
            margin: 0 12px;
            display: inline-block;
            vertical-align: middle;
          }
        }
        .text {
          font-size: 12px;
          line-height: 24px;
          color: @c-169;
          display: inline-block;
          vertical-align: middle;
        }
      }
      .mint-button {
        height: auto;
        padding: 7px 0;
        width: 168px;
        text-align: center;
        background-color: @c-blue;
        border-radius: 20px;
        .mint-button-icon {
          line-height: 0;
        }
        .mint-button-text {
          font-size: 13px;
          line-height: 24px;
          color: #FFF;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    .share-alert {
      position: absolute;
      width: 100vw;
      height: 100vh;
      top: 0;
      left: 0;
      z-index: 5;
      opacity: .7;
      background-image: url('/src/assets/share-alert.jpg');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      img {
        width: 39vw;
        height: 19vw;
        position: absolute;
        top: 40%;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
    }
  }
</style>